<template>
	<view>
		
		<view v-show="PageCur == 'home'" :class="{ hidepage: PageCur !== 'home' }"><home :opcity="opcity"></home></view>
		<view v-show="PageCur == 'zhihuan'" :class="{ hidepage: PageCur !== 'zhihuan' }"><zhihuan></zhihuan></view>
		<view v-show="PageCur == 'shengtai'" :class="{ hidepage: PageCur !== 'shengtai' }"><shengtai></shengtai></view>
		<view v-show="PageCur == 'my'" :class="{ hidepage: PageCur !== 'my' }"><my></my></view>
		<view class="cu-tabbar-height"></view>
		<bottom-tabbar :navList="navList"></bottom-tabbar>
	</view>
</template>

<script>

import Home from '@/pages/home/home.vue'
import Zhihuan from '@/pages/zhihuan/zhihuan.vue'
import Shengtai from '@/pages/shengtai/shengtai.vue'
import My from '@/pages/my/my.vue'
import bottomTabbar from '@/components/bottom-tabbar.vue'
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		bottomTabbar,
		Home,
		Zhihuan,
		Shengtai,
		My
	},
	data() {
		return {
			opcity: 0,
			iconOpcity: 0.5,
			navList: [
				{
					text:"首页",
					name: 'home',
				},
				{
					text:"置换",
					name: 'zhihuan',
				},
				{
					text:"生态",
					name: 'shengtai',
				},
				{
					text:"我的",
					name: 'my',
				}
			]
		};
	},
	onLoad() {
		this.isLogin(true)
		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowWidth / 2
				}
			})
		}, 50)
	},
	onPageScroll(e) {
		let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
		let opcity = scroll / this.scrollH;
		if (this.opcity >= 1 && opcity >= 1) {
			return;
		}
		this.opcity = opcity;
	},
	onShow() {

	},
	methods: {},
	watch: {
		PageCur(newName, oldName) {
			this.isLogin(true)
			if(newName === 'home') {
				// 监听页面地切，做你想做的事
				// this.init()
			}
		}
	},
	computed: {
		...mapState({
			PageCur: 'PageCur'
		})
	}
};
</script>

<style scoped lang="scss">
.hidepage {
	opacity: 0;
}

.active {
	color: var(--themeColor);
}

.msg-box {
	width: 80%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	background-color: #fff;
	border-radius: 6rpx;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

</style>
